import {Component} from 'react'
import Login from './components/Login';
import RefCom from './components/RefCom'
import IfCom from './components/IfCom'
import ListCom from './components/ListCom'
import Reg from './components/Reg'
import Index from './components/Index'
import UseStateCom from './components/UseState';
import UseEffectCom from './components/UseEffectCom';
import { useState } from 'react';

function App(){
  
  const [isShow,setIsShow]=useState(true);

  return (
    <div>
      {
        isShow &&
        <UseEffectCom></UseEffectCom>
      }
     
      {/* <UseStateCom></UseStateCom> */}
       {/* <Index></Index> */}

       <button onClick={()=>setIsShow(false)}>销毁组件</button>
    </div>
  )
}

// class App extends Component{
//   constructor(){
//     super();
//      this.state={
//       isSHow:true,
//       model:{
//         id:1000,
//         title:"你好"
//       }
//      }
//   }
//   show=()=>{
//     this.setState({isSHow:!this.state.isSHow})
//   }
//   render(){
//     return <div>
//       {/* <ListCom></ListCom>
//       <IfCom></IfCom>
//       <RefCom></RefCom> */}
//       {/* <Login></Login> */}
//       {/* <Reg></Reg> */}
//       {
//         this.state.isSHow &&
//         <Index></Index>
//       }

//       <button onClick={this.show}>显示组件</button>
     
//     </div>
//   }

// }
export default App;